<template>
	<view>
		<view class="card" v-for="v in list">
			<view class="user_info flex-jsb">
				<view class="flex-ac-jsb">
					<view class="avatar-box">
						<image src="../../static/images/f.png" mode=""></image>
					</view>
					<view class="ml20">
						<view class="mb8" style="color: #333;">魏嘉宏</view>
						<view>铭初新教育联合创办人</view>
					</view>
				</view>
				<view class="timeAgo">
					{{'2021-10-23 14:51:05' | timeDifference}}
				</view>
			</view>
			<view class="article_info">
				<view class="info_title">让真实明白生活</view>
				<view class="info_content">
					<xzjReadMore hideLineNum="2" showHeight="100">
						你未看此花时,此花与此花与汝同归于寂你未看此花时,此花与此花与汝同归于寂你未看此花时,此花与此花与汝同归于寂你未看此花时,此花与此花与汝同归于寂你未看此花时,此花与此花与汝同归于寂你未看此花时,此花与此花与汝同归于寂
					</xzjReadMore>
					<view class="cart">
						<text class="iconfont icon-gouwuche4 mr14"></text>周三下午茶
					</view>
					<view class="address cart">
						#夏令营
					</view>
					<view class="comments">
						<text class="cart mr10">@赵小敏:</text>
						<text>看了就让人咽口水的鸡爪，满足不同口味需求</text>
					</view>
					<image class=""
						src="http://bbs.crmeb.net/data/attachment/block/34/3496780a2cd7e0cd996e93c4358f4ca1.jpg">
					</image>
				</view>

				<view class="article_btn">
					<view class="love">
						<view class="iconfont icon-shoucang1" v-if="false"></view>
						<view class="iconfont icon-shoucang" v-else></view>
					</view>
					<view class="love">
						<image src="../../static/img/speech.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import xzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue"
	export default {
		name: "homeCard",
		components: {
			xzjReadMore
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		filters: {
			timeDifference(tmpTime) {
				console.log(tmpTime);
				var mm = 1000; //1000毫秒 代表1秒
				var minute = mm * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var month = day * 30;
				var ansTimeDifference = 0; //记录时间差
				var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date()
					.getTime(); //将 yyyy-mm-dd H:m:s 进行正则匹配
				var nowTime = new Date().getTime(); //获取当前时间戳
				var tmpTimeDifference = nowTime - tmpTimeStamp; //计算当前与需要计算的时间的时间戳的差值
				if (tmpTimeDifference < 0) { //时间超出，不能计算
					return 0;
				}
				/**
				 * 通过最开始强调的各个时间段用毫秒表示的数值，进行时间上的取整，为0的话，则没有到达
				 * */
				var DifferebceMonth = tmpTimeDifference / month; //进行月份取整
				var DifferebceWeek = tmpTimeDifference / (7 * day); //进行周取整
				var DifferebceDay = tmpTimeDifference / day; //进行天取整
				var DifferebceHour = tmpTimeDifference / hour; //进行小时取整
				var DifferebceMinute = tmpTimeDifference / minute; //进行分钟取整
				if (DifferebceDay >= 3) {
					return tmpTime; //大于3天 直接返回时间
				} else if (DifferebceDay >= 2) {
					return "前天";
				} else if (DifferebceDay >= 1) {
					return "昨天";
				} else if (DifferebceHour >= 1) {
					returnparseInt(DifferebceHour) + "个小时前";
				} else if (DifferebceMinute >= 1) {
					return parseInt(DifferebceMinute) + "分钟前";
				} else {
					return "刚刚";
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 10px;

		.cart {
			color: #88B04B;
		}

		.user_info {
			color: #A2A2A2;

			.avatar-box {
				width: 96rpx;
				height: 96rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

		.article_info {
			margin-top: 38rpx;
			color: #A2A2A2;
			line-height: 24rpx;
			font-size: 24rpx;

			.info_title {
				color: #333333;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.info_content {
				line-height: 36rpx;

				image {
					width: 100%;
					height: 426rpx;
					border-radius: 5px;
					margin: 15rpx auto;
				}
			}

			.article_btn {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.love {
					image {
						width: 24px;
						height: 24px;
					}

					.iconfont {
						font-size: 24px;
					}

					.icon-shoucang1 {
						color: #88B04B;
					}
				}
			}

		}
	}
</style>
